<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .entry-view {
            border: 1px solid dodgerblue;
            width: 500px;
            height: 500px;
            margin: 10px;
        }
        .leave-view {
            border: 1px solid orange;
            width: 500px;
            height: 500px;
            margin: 10px;
        }

        .content-view {
            display: flex;
            flex-direction: row;
        }

        .car-input {
            background-color: dodgerblue;
            color: white;
            font-size: 20px;
            font-weight: bold;
        }

        .space-view {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
        }
        .space .item {
            border: 1px solid gray;
            width: 150px;
            height: 100px;
            margin: 2px;
            color: white;
            padding: 5px;
            padding: 5px;
        }

        /*有车显示红色*/
        .busy {
            background-color: darkred;
        }

        /* 没车，显示绿色*/
        .empty {
            background-color: green;
        }
    </style>

</head>
<body>
    <div class="content-view">
        <div class="entry-view">
            入库
            <form action="/entry_car" method="post">
                <input type="text" name="name" placeholder="输入车牌" class="car-input">
                <input type="text" name="space_name" placeholder="输入要停的车位号" class="car-input">
                <input type="submit" value="入库">
            </form>

            <hr>
            当前车位情况: <span>共{$total}/余位({$free_count})</span>

            <hr>

            <div class="space-view">
            {foreach $spaces_objs as $key=>$vo }
                <div class="space">
                    {eq name="vo.status" value="1"}
                    <!-- 忙 -->
                    <div class="item busy">
                        <div>🚗</div>
                        <div class="name">{$vo.name}</div>
                        <div class="name">{$vo.car_name | default=''}</div>
                        <div class="name">{$vo.carObj.entry_at}</div>
                        <div class="name">
                            {eq name="vo.carObj.is_vip" value="1"}
                                <span style="color: yellow;">💎 VIP</span>
                            {else/}
                            临时车
                            {/eq}
                        </div>
                    </div>
                    {else/}
                    <!-- 空 -->
                    <div class="item empty">
                        <div class="name">{$vo.name}</div>
                    </div>
                    {/eq}
                </div>
            {/foreach}
            </div>
        </div>

        <div class="leave-view">
            出库
            <form action="/leave_car" method="post">
                <input type="text" name="name" placeholder="输入车牌" class="car-input">
                <input type="submit" value="出库">
            </form>
        </div>
    </div>
</body>
</html>